.alfresco_logging_DebugLog {
   margin: 25px 0;
   &__header, &__clear-button, &__label, &__filter, &__filter-button {
      display: inline-block;
      font-size: 12px;
      line-height: 24px;
   }
   &__header {
      font-family: @bold-font;
      font-size: 16px;
      font-weight: 700;
   }
   &__clear-button, &__filter-button {
      background: transparent;
      border: @standard-button-border;
      border-radius: @standard-button-border-radius;
      color: @standard-button-font-color;
      cursor: pointer;
      margin: 0;
      padding: 0 10px;
      position: relative;
      &:hover, &:focus {
         color: @standard-button-font-color-focus;
         outline: 0;
      }
      &:active {
         color: @standard-button-font-color-active;
         left: 1px;
         top: 1px;
      }
   }
   &__clear-button {
      margin-left: 20px;
   }
   &__checkbox {
      display: none;
      &:checked {
         + .alfresco_logging_DebugLog__label {
            background: #cfc;
            border-color: #0a0;
            color: #0a0;
            opacity: 1;
         }
      }
   }
   &__checkbox-publications {
      &:not(:checked) {
         ~ .alfresco_logging_DebugLog__log {
            .alfresco_logging_DebugLog__log__entry--publish {
               display: none;
            }
         }
      }
   }
   &__checkbox-subscriptions {
      &:not(:checked) {
         ~ .alfresco_logging_DebugLog__log {
            .alfresco_logging_DebugLog__log__entry--subscribe {
               display: none;
            }
         }
      }
   }
   &__label {
      background: #fcc;
      border: 1px solid #a00;
      border-radius: 3px;
      color: #a00;
      cursor: pointer;
      opacity: .2;
      padding: 0 10px;
      position: relative;
      transition: all .2s ease-out;
      &:active {
         left: 1px;
         top: 1px;
      }
   }
   &__label-publications {
      margin-left: 50px;
   }
   &__filter {
      border: 1px solid #bbb;
      padding-left: 6px;
      width: 150px;
      &__include {
         margin-left: 50px;
      }
   }
   &__log {
      display: block;
      list-style: none;
      margin: 0;
      max-width: 100%;
      padding: 0;
      &__entry {
         align-items: stretch;
         border-top: 1px solid #ccc;
         cursor: pointer;
         display: flex;
         justify-content: space-between;
         margin: 0;
         padding: 5px 0;
         position: relative;
         &:last-child {
            border-bottom: 1px solid #ccc;
         }
         &__info, &__data {
            min-width: 200px;
         }
         &__info {
            background-position: 0 0;
            background-repeat: no-repeat;
            flex: 0 1 auto;
            font-size: 12px;
            padding-left: 30px;
            word-wrap: break-word;
            &__topic, &__timestamp, &__object {
               display: block;
            }
            &__topic {
               font-family: @bold-font;
               font-size: 14px;
               margin-bottom: 3px;
            }
            &__timestamp, &__object {
               font-family: monospace;
               font-size: 11px;
            }
            &__object {
               color: #999;
            }
         }
         &__data {
            flex: 0 1 50%;
            font-family: @bold-font;
            margin-left: 20px;
            &__collapsed, &__full {
               font-family: monospace;
               font-size: 11px;
               margin-top: 3px;
               max-width: 100%;
            }
            &__collapsed {
               color: #aaf;
               display: none;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
            }
            &__full {
               background: #fafafa;
               border: 1px solid #999;
               box-shadow: inset 2px 2px 5px rgba(0,0,0,.3);
               color: #000;
               cursor: text;
               display: block;
               margin: 10px 10px 5px 0;
               padding: 9px 10px 7px;
               white-space: pre-wrap;
            }
            &--collapsed {
               .alfresco_logging_DebugLog__log__entry__data {
                  &__collapsed {
                     display: block;
                  }
                  &__full {
                     display: none;
                  }
               }
            }
         }
         &--publish, &--subscribe {
            .alfresco_logging_DebugLog__log__entry__info {
               &::before {
                  font-family: @bold-font;
                  font-size: 8px;
                  left: 3px;
                  position: absolute;
                  top: 30px;
               }
            }
         }
         &--publish {
            .alfresco_logging_DebugLog__log__entry__info {
               background-image: url("");
               &::before {
                  color: #090;
                  content: "PUB";
               }
            }
         }
         &--subscribe {
            .alfresco_logging_DebugLog__log__entry__info {
               background-image: url("");
               &::before {
                  color: #900;
                  content: "SUB";
               }
            }
         }
         &--hidden {
            display: none;
         }
         &:hover {
            background: #f0f0f0;
            .alfresco_logging_DebugLog__log__entry__data {
               &__collapsed {
                  color: #00c;
               }
            }
         }
      }
   }
}
